'use client';

import { Dropdown, Space, Divider, MenuProps } from 'antd';
import React, { useRef } from 'react';
import { Icon } from '@/components';
import { spreadFragmentInChildren } from './utils';
import { Container } from './index.styled';

export interface ActionsProps {
  threshold?: number;
}

export default function Actions({
  children,
  threshold = 2,
}: React.PropsWithChildren<ActionsProps> ): JSX.Element {
  const ref = useRef<HTMLDivElement>(null);
  const list = spreadFragmentInChildren(children);
  console.log('list---', list);
  const menuItems = list.slice(threshold).map((item) => {
    const node = item as React.ReactElement;
    const menuItem: NonNullable<MenuProps['items']>[number] = {
      key: node?.key || '',
      label: node,
      danger: node?.props?.danger,
    };
    return menuItem;
  });

  return (
    <Container ref={ref}>
      <Space
        split={<Divider type="vertical" className="oic-divider" />}
        size="small"
      >
        {list.slice(0, threshold)}
        <Dropdown
          menu={{
            items: menuItems,
          }}
          placement="bottomRight"
          overlayClassName="oic-actions-dropdown-overlay"
        >
          <a>
            <Icon
              icon="DownOutlined"
            />
          </a>
        </Dropdown>
      </Space>
    </Container>
  );
}